<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="file" type="file"/></input>
    <img id="img"/>
</body>
<script>
    //https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file
    //https://developer.mozilla.org/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications
    let img = document.getElementById('img')
    document.getElementById('file').onchange = function(){
        console.log(this.files)
        //读取图片方式1-得到一个文件的二进制文件对象blob(推荐)
        // let file = URL.createObjectURL(this.files[0])
        // console.log(file)
        // img.src = file
        //读取图片方式2-得到一个文件base64字符串
        let reader = new FileReader()
        reader.onload = function(e){
            let content = e.target.result
            // console.log(content)
            img.src = content
        }
        reader.readAsDataURL(this.files[0])
    }
</script>
</html>